<template>
  <a-drawer title="添加服务记录" :closable="true" @close="handleCancel" :visible="visible" width="900">
    <a-form-model
      ref="ruleForm"
      :rules="rules"
      :model="model"
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      labelAlign="right"
    >
      <!-- <a-form-model-item label="知情同意书" prop="consentImage">
        阅读知情同意书并署名
        <j-image-upload
          class="avatar-uploader"
          text="上传"
          v-model="model.consentImage"
          @change="changeImage"
          :is-multiple="true"
          :number="3"
        ></j-image-upload>
      </a-form-model-item> -->
      <a-form-model-item label="是否体验服务包">
        <a-switch v-model="isExp" checked-children="是" un-checked-children="否"></a-switch>
      </a-form-model-item>
      <a-form-model-item prop="protocolImage">
        <label :class="!isExp ? 'required' : ''" slot="label">服务协议</label>
        阅读服务协议并署名
        <j-image-upload
          class="avatar-uploader"
          text="上传"
          v-model="model.protocolImage"
          :is-multiple="true"
        ></j-image-upload>
      </a-form-model-item>
      <!-- <a-form-model-item label="生活方式评估" prop="lifePlan">
        <a-textarea
          placeholder="请填写生活方式评估后的主要健康风险点"
          :maxLength="240"
          v-model="model.lifePlan"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-model-item> -->
      <!-- <a-form-model-item label="用药方案" prop="drugPlan">
        <a-textarea
          placeholder="请填写用药方案"
          :maxLength="240"
          v-model="model.drugPlan"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-model-item>

      <a-form-model-item label="饮食方案" prop="dietPlan">
        <a-textarea
          placeholder="请填写饮食方案"
          :maxLength="240"
          v-model="model.dietPlan"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-model-item>

      <a-form-model-item label="运动方案" prop="sportPlan">
        <a-textarea
          placeholder="请填写运动方案"
          :maxLength="240"
          v-model="model.sportPlan"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-model-item> -->

      <a-form-model-item label="服务包模版" prop="serviceTemplateId">
        <a-radio-group v-model="model.serviceTemplateId" @change="handleChange">
          <a-radio v-for="(item, index) in reverseServiceList" :key="index" :value="item.dataId">
            {{ item.packageName }}
          </a-radio>
        </a-radio-group>
      </a-form-model-item>

      <a-form-model-item label="服务包描述" v-if="desc">
        <p>{{ desc }}</p>
      </a-form-model-item>

      <a-form-model-item label="服务开始时间" prop="serviceStartTime">
        <a-date-picker
          style="width: 250px"
          v-model="model.serviceStartTime"
          placeholder="请选择服务开始时间"
          @change="(date, dateString) => onChange(date, dateString, 'serviceStartTime')"
        />
      </a-form-model-item>

      <a-form-model-item label="打卡计划模版" prop="signinTemplateId">
        <a-radio-group v-model="model.signinTemplateId">
          <a-radio v-for="(item, index) in signinTemplateList" :key="index" :value="item.dataId">
            {{ item.signInName }}
          </a-radio>
        </a-radio-group>
      </a-form-model-item>

      <a-form-model-item label="其他">
        <a-textarea
          :maxLength="200"
          v-model="model.other"
          placeholder="其他内容，请输入在200字以内"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-model-item>

      <a-form-model-item :wrapper-col="{ span: 12, offset: 10 }">
        <a-button type="primary" @click="save" :loading="saveLoading">保存</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction, deleteAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import DetailsTable from './DetailsTable.vue'
import moment from 'moment'

export default {
  name: 'ServiceDetailModal',
  components: {
    DetailsTable
  },
  props: ['reverseServiceList', 'signinTemplateList'],
  data() {
    return {
      visible: false,
      saveLoading: false,
      model: {},
      isExp: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 16,
            offset: 3
          }
        }
      },
      url: {
        updateReverseDataUrl: 'archive/reverse/scheme/edit'
      },
      desc: '',
      rules: {
        consentImage: [{ required: true, message: '请上传知情同意书图片!' }],
        protocolImage: [{ validator: this.isExperience }],
        lifePlan: [{ required: true, message: '请填写生活方式评估后的主要健康风险点!' }],
        drugPlan: [{ required: true, message: '请填写用药方案!' }],
        dietPlan: [{ required: true, message: '请填写饮食方案!' }],
        sportPlan: [{ required: true, message: '请填写运动方案!' }],
        serviceTemplateId: [{ required: true, message: '请选择服务包!' }],
        serviceStartTime: [{ required: true, message: '请选择服务开始时间!' }],
        signinTemplateId: [{ required: true, message: '请选择打卡计划模板!' }]
      }
    }
  },
  created() {},
  methods: {
    add() {
      this.visible = true
      this.model = {}
      this.saveLoading = false
    },
    save() {
      console.log(this.model)
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.saveLoading = true
          this.model['patientId'] = this.$route.query[PAGE_MENU_TYPE.PatientId]
          //        let data = JSON.parse(JSON.stringify(this.currentPatient))
          let data = this.model
          postAction(this.url.updateReverseDataUrl, data)
            .then(res => {
              if (res.success) {
                this.$message.success('添加成功')
                this.$emit('refresh')
              } else {
                this.$message.error(res.message)
                this.$emit('refresh')
              }
            })
            .finally(() => {
              this.visible = false
            })
        }
      })
    },
    isExperience(rule, value, callback) {
      if (!this.isExp && (typeof value === 'undefined' || value === '')) {
        callback(new Error('请上传服务协议图片!'))
      } else {
        callback()
      }
    },
    changeImage(file) {
      console.log(file)
    },
    // 关闭
    handleCancel() {
      this.close()
    },
    close() {
      this.visible = false
      this.desc = ''
      this.isExp = false
      this.$refs.ruleForm.resetFields()
    },
    handleChange(e) {
      this.reverseServiceList.forEach(v => {
        if (v.dataId == e.target.value) {
          this.desc = v.packageDesc
        }
      })
      console.log(e.target)
    },
    onChange(date, dateString) {
      dateString && (this.model.serviceStartTime = dateString + ' 00:00:00')
    },
    disabledDate(current) {
      return current < moment().subtract(1, 'day')
    }
  }
}
</script>

<style lang="less" scoped>
.required::before {
  display: inline-block;
  margin-right: 4px;
  color: #f5222d;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
}
</style>

